import * as React from "react"
import { observable,action} from "mobx"
import { observer, inject } from "mobx-react"
import FN from "../tools/fn"
import {Link} from "react-router-dom"
import { CSSTransitionGroup } from 'react-transition-group'

@inject("article")
@observer
export default class Item extends React.Component {
 @observable txt = '';
 @observable list = [];
  constructor(props) {
    super(props)
    this.store = this.props.article
  }
 
  @action.bound
  setSomeValue(a,event) {
   this[a] = event.target.value;
 }

  @action.bound
 pushItem() {
  this.list.push({
      txt:this.txt,
      id:+new Date()
  });
  this.txt=""
}
@action.bound
removeItem(i){
    this.list.splice(i,1);
    console.log("dele",i,this.list)
}
listRend(){
  return this.list.map((item,i)=>{
    return (
        <a className="am-list-item" key={item.id}>
            <div className="am-list-content">{item.txt}</div>
            <div className="am-list-arrow">
                <span className="am-icon" onClick={()=>this.removeItem(i)}>X</span>
            </div>      
        </a>
    )
  })
}

    render() {
            return (
                <div>
                    <div className="am-list am-list-form">
                        <div className="am-list-header">常规类</div>
                        <div className="am-list-body">
                            <div className="am-list-item am-input-autoclear">
                                <div className="am-list-label" id="list-label-1">输入内容</div>
                                <div className="am-list-control">
                                  <input type="text" value={this.txt} onChange={e => this.setSomeValue('txt', e)} placeholder="输入内容" /> 
                                </div>
                                <a  type="button" className="am-button tiny-blue" role="button" onClick={()=>this.pushItem()}>确定</a>
                            </div>
                        </div>
                    </div>
                    <div className="am-list">
                           <div className="am-list-header">++++==列表动画++++++++==</div>
                            <div className="am-list-body">
                                    <CSSTransitionGroup
                                        transitionName="left-item"
                                        transitionEnter={true}
                                        transitionLeave={true}
                                        transitionEnterTimeout={400}
                                        transitionLeaveTimeout={400}>
                                      {this.listRend()}
                                        
                                    </CSSTransitionGroup>
                            </div>
                    </div> 
                </div>            
            )
    }
}


